<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>待办任务列表</span>
      </div>
      <el-table :data="taskArray" size="small" :stripe="stripe" :default-sort = "{prop: 'CREATE_TIME_', order: 'descending'}">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="流程名称" prop="BUSINESS_KEY"></el-table-column>
        <el-table-column label="当前任务节点名称" prop="NAME_"></el-table-column>
        <el-table-column label="开始时间" prop="CREATE_TIME_" sortable>
          <template slot-scope="scope">
            {{ formatBeijingTime(scope.row.CREATE_TIME_) }}
          </template>
        </el-table-column>
        <el-table-column label="任务描述" prop="DISCRIPTION_"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handle(scope.row.ID_)">办理</el-button>
            <el-button type="text">转交</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <component :is="currentFormComponent" @update:visible="visible = $event"></component>
  </div>
</template>
<script>
import moment from 'moment-timezone';
import {mapState} from 'vuex';
export default {
  name: "TodoTask",
  data() {
    return {
      stripe: true,
      taskArray: [],
      currentFormComponent: null,
    }
  },
  computed: {
    ...mapState([
      'taskCompleted'  // 映射 this.taskCompleted 到 this.$store.state.taskCompleted
    ])
  },
  watch: {
    taskCompleted: {
      handler(newVal) {
        if (newVal) {
          this.getTaskList(); // 刷新任务列表
          console.log("任务列表刷新了", newVal)
          this.$store.commit('setTaskCompleted', false); // 重置任务完成状态
        }
      },
      immediate: false
    }
  },
  methods: {
    handle(taskId) {
      Promise.all([
        this.$http.get(`/task/view/${taskId}`),
        this.$http.get(`/history/highLine/task/${taskId}`)
      ]).then(([formResponse, historyResponse]) => {
        if (formResponse.data.code === 1 && historyResponse.data.code === 1) {
          // 处理两个请求的数据
          const formKey = formResponse.data.data;
          const historyData = historyResponse.data.data;
          console.log(JSON.stringify(formResponse.data, null, 2), JSON.stringify(historyResponse.data, null, 2))
          this.currentFormComponent = () => import(`@/views/${formKey}.vue`)
              .then(m => {
                const component = m.default;
                component.props = {...component.props, historyData: {type: Object, default: () => historyData}};
                this.$nextTick(() => {
                  this.$store.commit('setIsVisible', true); // 确保组件加载后再次设置visible状态
                });
                return component;
              })
              .catch(error => {
                console.error("Component loading failed:", error);
                alert("加载组件失败");
              });
        } else {
          this.$message.error('数据加载失败，请联系管理员');
        }
      })
      this.$store.commit("setTaskId", taskId);
    },
    getTaskList() {
      this.$http.get("/task").then((response) => {
        if (response.data.code == 1) {
          this.taskArray = response.data.data;
          console.log("Task list refreshed:", this.taskArray);
        } else {
          this.$message.error('刷新任务列表失败');
        }
      });
    },
    formatBeijingTime(dateString) {
      return moment(dateString).tz('Asia/Shanghai').format('YYYY-MM-DD HH:mm:ss');
    },
  },
  mounted() {
    this.getTaskList()
  }
}
</script>
